/*条形图
-----------------------------------------------
需要插入显示图形统计图的容器div为：<div id="memberlistGraph"></div>
------------------------------------------------
一项统计调用方法
memberlistGraphOne(x, y1, yList);

两项统计调用方法
memberlistGraph(x, y1, y2, yList);

三项统计调用方法
memberlistGraph2(x, y1, y2, y3, yList);
-------------------------------------------------
x 坐标轴名称（学校名称）
y1、y2··· 数据
yList 数据名称，数组顺序与y1、y2···位置对应

--------------------------------------------
实例：
var name = ['福州市中小学校图书馆（室）管理平台', '宁德市中小学校图书馆（室）管理平台', '莆田市中小学图书馆（室）管理平台', '福州市中小学校图书馆（室）管理平台', '宁德市中小学校图书馆（室）管理平台', '莆田市中小学图书馆（室）管理平台'];
var ydata1 = ['735876', '2273131', '2872422', '735876', '2273131', '2872422'];
var ydata2 = ['50104', '245335', '446475', '50104', '245335', '446475'];
var yname = ['馆藏数', '读者'];


memberlistGraph(name, ydata1, ydata2, yname);

*/

/* 一项 */
function memberlistGraphOne(x, y1, yList) {
  // 基于准备好的dom，初始化echarts实例
  if (x.length <= 6) {
    document.getElementById('memberlistGraph').style.height = '70vh'; //根据项目个数设置容器高度
  } else {
    document.getElementById('memberlistGraph').style.height = x.length * 70 + 'px'; //根据项目个数设置容器高度
  }
  var myChart = echarts.init(document.getElementById('memberlistGraph'));

  // 指定图表的配置项和数据
  var option = {
    //color: ['#bcdff5', '#f6c745'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      },
      textStyle: {
        fontSize: 18
      }
    },
    legend: {
      data: yList
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          //rotate: 10,
          interval: 0,
          //            formatter: function (val) {
          //              return val.split("").join("\n");
          //            },
          textStyle: {
            fontSize: 14
          }
        }
      }
    ],
    xAxis: [
      {
        type: 'value',
        position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'right',
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '30%',
        data: y1,
        barGap: 0.01,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        }
        }
    ]
  };
  myChart.setOption(option);
}
/* 两项Y轴函数 */
function memberlistGraph(x, y1, y2, yList) {
  // 基于准备好的dom，初始化echarts实例
  if (x.length <= 6) {
    document.getElementById('memberlistGraph').style.height = '70vh'; //根据项目个数设置容器高度
  } else {
    document.getElementById('memberlistGraph').style.height = x.length * 70 + 'px'; //根据项目个数设置容器高度
  }
  var myChart = echarts.init(document.getElementById('memberlistGraph'));

  // 指定图表的配置项和数据
  var option = {
    //color: ['#bcdff5', '#f6c745'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      },
      textStyle: {
        fontSize: 18
      }
    },
    legend: {
      data: yList
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true,
    },
    yAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          //rotate: 10,
          interval: 0,
          //            formatter: function (val) {
          //              return val.split("").join("\n");
          //            },
          textStyle: {
            fontSize: 14
          }
        }
      }
    ],
    xAxis: [
      {
        type: 'value',
        position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'right',
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '30%',
        data: y1,
        barGap: 0.01,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        }
        },
      {
        name: yList[1],
        type: 'bar',
        barWidth: '30%',
        data: y2,

        barGap: 0.01,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(187, 84,17, 1)'
                    }, {
              offset: 1,
              color: 'rgba(241, 172,53, 1)'
                    }]),
          }
        }
        }
    ]
  };
  myChart.setOption(option);
}

/* 三项Y轴函数 */
function memberlistGraph2(x, y1, y2, y3, yList) {
  // 基于准备好的dom，初始化echarts实例
  if (x.length <= 6) {
    document.getElementById('memberlistGraph').style.height = '60vh'; //根据项目个数设置容器高度
  } else {
    document.getElementById('memberlistGraph').style.height = x.length * 70 + 'px'; //根据项目个数设置容器高度
  }
  var myChart = echarts.init(document.getElementById('memberlistGraph'));

  // 指定图表的配置项和数据
  var option = {
    //color: ['#3398DB','#00ff00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      }
    },
    legend: {
      data: yList
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true
    },
    yAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          //rotate: 10,
          interval: 0,
          //            formatter: function (val) {
          //              return val.split("").join("\n");
          //            },
          textStyle: {
            fontSize: 10
          }
        }
      }
    ],
    xAxis: [
      {
        //show:false,
        type: 'value',
        position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'right',
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '20%',
        data: y1,
        barGap: 0.1,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolOffset: [20, 0],
          data: [
            {
              type: 'max',
              name: '最大值'
              },
            {
              type: 'min',
              name: '最小值'
              }
                ]
        },
        markLine: {
          label: {
            normal: {
              position: 'start'
            }
          },
          data: [
            {
              type: 'average',
              name: '平均值'
              }
                ]
        }
        },
      {
        name: yList[1],
        type: 'bar',
        barWidth: '20%',
        data: y2,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(187, 84,17, 1)'
                    }, {
              offset: 1,
              color: 'rgba(241, 172,53, 1)'
                    }]),
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolOffset: [20, 0],
          data: [
            {
              type: 'max',
              name: '最大值'
              },
            {
              type: 'min',
              name: '最小值'
              }
                ]
        },
        markLine: {
          label: {
            normal: {
              position: 'start'
            }
          },
          data: [
            {
              type: 'average',
              name: '平均值'
              }
                ]
        }
        },
      {
        name: yList[2],
        type: 'bar',
        barWidth: '20%',
        data: y3,
        barGap: 0.1,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(36, 146,21, 1)'
                    }, {
              offset: 1,
              color: 'rgba(179, 222,133, 1)'
                    }]),
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolOffset: [20, 0],
          data: [
            {
              type: 'max',
              name: '最大值'
              },
            {
              type: 'min',
              name: '最小值'
              }
                ]
        },
        markLine: {
          label: {
            normal: {
              position: 'start'
            }
          },
          data: [
            {
              type: 'average',
              name: '平均值'
              }
                ]
        }
        }
    ]
  };
  myChart.setOption(option);
}

/* 四项Y轴函数 */
function memberlistGraph3(x, y1, y2, y3, y4, yList) {
  // 基于准备好的dom，初始化echarts实例
  if (x.length <= 6) {
    document.getElementById('memberlistGraph').style.height = '60vh'; //根据项目个数设置容器高度
  } else {
    document.getElementById('memberlistGraph').style.height = x.length * 70 + 'px'; //根据项目个数设置容器高度
  }
  var myChart = echarts.init(document.getElementById('memberlistGraph'));

  // 指定图表的配置项和数据
  var option = {
    //color: ['#3398DB','#00ff00'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line'
      }
    },
    legend: {
      data: yList
    },
    grid: {
      left: 0,
      right: '4%',
      bottom: '30px',
      containLabel: true
    },
    yAxis: [
      {
        type: 'category',
        data: x,
        axisTick: {
          alignWithLabel: true
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          //rotate: 10,
          interval: 0,
          //            formatter: function (val) {
          //              return val.split("").join("\n");
          //            },
          textStyle: {
            fontSize: 10
          }
        }
      }
    ],
    xAxis: [
      {
        type: 'value',
        position: 'top'
        }
    ],
    itemStyle: {
      normal: {
        shadowColor: 'rgba(0, 0, 0, 0.6)',
        shadowBlur: 2,
        barBorderRadius: 3
      }
    },
    label: {
      normal: {
        show: true,
        position: 'right',
      }
    },
    series: [
      {
        name: yList[0],
        type: 'bar',
        barWidth: '20%',
        data: y1,
        barGap: 0.1,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(27, 115,153, 1)'
                    }, {
              offset: 1,
              color: 'rgba(86, 178,211, 1)'
                    }]),
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolOffset: [20, 0],
          data: [
            {
              type: 'max',
              name: '最大值'
              },
            {
              type: 'min',
              name: '最小值'
              }
                ]
        },
        markLine: {
          label: {
            normal: {
              position: 'start'
            }
          },
          data: [
            {
              type: 'average',
              name: '平均值'
              }
                ]
        }
        },
      {
        name: yList[1],
        type: 'bar',
        barWidth: '20%',
        data: y2,
        barGap: 0.1,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(187, 84,17, 1)'
                    }, {
              offset: 1,
              color: 'rgba(241, 172,53, 1)'
                    }]),
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolOffset: [20, 0],
          data: [
            {
              type: 'max',
              name: '最大值'
              },
            {
              type: 'min',
              name: '最小值'
              }
                ]
        },
        markLine: {
          label: {
            normal: {
              position: 'start'
            }
          },
          data: [
            {
              type: 'average',
              name: '平均值'
              }
                ]
        }
        },
      {
        name: yList[2],
        type: 'bar',
        barWidth: '20%',
        data: y3,
        barGap: 0.1,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(36, 146,21, 1)'
                    }, {
              offset: 1,
              color: 'rgba(179, 222,133, 1)'
                    }]),
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolOffset: [20, 0],
          data: [
            {
              type: 'max',
              name: '最大值'
              },
            {
              type: 'min',
              name: '最小值'
              }
                ]
        },
        markLine: {
          label: {
            normal: {
              position: 'start'
            }
          },
          data: [
            {
              type: 'average',
              name: '平均值'
              }
                ]
        }
        },
      {
        name: yList[3],
        type: 'bar',
        barWidth: '20%',
        data: y4,
        barGap: 0.1,
        barCategoryGap: 0.01,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
              offset: 0,
              color: 'rgba(197, 29,29, 1)'
                    }, {
              offset: 1,
              color: 'rgba(231, 126,126, 1)'
                    }]),
          }
        },
        markPoint: {
          symbol: 'circle',
          symbolOffset: [20, 0],
          data: [
            {
              type: 'max',
              name: '最大值'
              },
            {
              type: 'min',
              name: '最小值'
              }
                ]
        },
        markLine: {
          label: {
            normal: {
              position: 'start'
            }
          },
          data: [
            {
              type: 'average',
              name: '平均值'
              }
                ]
        }
        }
    ]
  };
  myChart.setOption(option);
}


/*饼图
-----------------------------------------------
需要插入显示图形统计图的容器div为：<div id="memberlistGraph"></div>
------------------------------------------------
函数调用方法
pieGraph(name, title, yList, data);

-------------------------------------------------
name 学校名称，一个值
title 报表名称（馆藏文献）
yList 数据名称
data 数据，数据格式[{value: number,name: 'DataName'},{value: number,name: 'DataName'}]

--------------------------------------------
实例：
  var name = '平潭综合实验区中小学校图书馆（室）管理平台';
  var title = '馆藏文献';
  var yList = ['中文图书', '外文图书', '中文期刊', '外文期刊', '视听资料','数字化文献'];
  var data = [{value: 335,name: '中文图书'},{value: 310,name: '外文图书'},{value: 234,name: '中文期刊'},{value: 135,name: '外文期刊'},{value: 1548,name: '视听资料'},{value: 1548,name: '数字化文献'}];

  pieGraph(name, title, yList, data);

*/

/* 饼图 */
function pieGraph(name, title, yList, data) {
  document.getElementById('memberlistGraph').style.height = yList.length * 120 + 'px'; //根据项目个数设置容器高度
  var myChart = echarts.init(document.getElementById('memberlistGraph'));
  option = {
    title: {
      text: name,
      subtext: title,
      x: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: "{b} : {c} ({d}%)",
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      backgroundColor: 'white',
      data: data
    },
    series: [
      {
        name: title,
        type: 'pie',
        radius: ['40%', '70%'],
        startAngle: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [{
              offset: 0,
              color: 'red'
                    }, {
              offset: 1,
              color: 'blue'
                    }]),
          }
        },
        label: {
          normal: {
            formatter: "{b} : ({d}%)"
          }
        },
        data: data,
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: function (idx) {
          return Math.random() * 200;
        }
        }
    ]
  };
  myChart.setOption(option);


}
